<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Vue learnDemo</title>
		<link rel="stylesheet" href="style.css">
		<script type="text/javascript" src="../vuejs/vue.min.js"></script>
	</head>
	<body>
		<script type="text/x-template" id="grid-template">
			<table v-if="filteredData.length">
				<thead>
					<tr>
						<th v-for="key in columns"
							@click="sortBy(key)"
							:class="{ active: sortKey == key }">
							{{ key | capitalize }}
							<span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
							</span>
						</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="entry in filteredData">
						<td v-for="key in columns">
							{{ entry[key] }}
						</td>
					</tr>
				</tbody>
			</table>
			<p v-else>No matches found.</v-else>
		</script>
		<div id="demo">
			<form id="search">
				Search <input name="query" v-model="searchQuery">
			</form>
			<demo-grid 
				:data="gridData" 
				:columns="gridColumns" 
				:filter-key="searchQuery">
			</demo-grid>
		</div>

		<script src="grid.js"></script>
	<!--
		<div id="app">
			<h1>{{ message }}</h1>
			<input type="text" v-model="message">
			<pre>{{ $data | json }}</pre>


		<form>
			<div class="error" v-show="!message">You must enter a msg to submit</div>
			<textarea v-model="message"></textarea>
			<button v-if="message">Send message</button>
		</form>
		<pre>{{ $data | json }}</pre>

		</div>
		<script>
			new Vue({
				el: '#app',
				data:{
					message:"hello world!"
				}			
			});
		</script>
	-->
	</body>
</html>